@extends("admin_system/public/layout")

@section('content')


    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 98vw;height:80vh;"></div>

    <div class="text-center">{!! $books->appends(['keywords'=>'','action'=>'books'])->links() !!}</div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '书籍观看统计信息',   //主标题
                subtext: '数量'//子标题
            },
            tooltip : {
                trigger: 'axis'
            },

            legend: {
                data:['视频观看人数','平均观看时长']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: false},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    //data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月']
                    data : [{!! $data['books'] !!}]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'阅读人数',
                    type:'bar',
                    data:[{!! $data['reads'] !!}],
//                    markPoint : { //标记点 类型和提示
//                        data : [
//                            {type : 'max', name: '最大值'},
//                            {type : 'min', name: '最小值'}
//                        ]
//                    },
//                    markLine : {    //线图
//                        data : [
//                            {type : 'average', name: '平均值'}
//                        ]
//                    }
                },
                //第一项数据
                {
                    name:'小时',
                    type:'bar',
                    data:[{!! $data['times'] !!}],
//                    markPoint : {
//                        data : [
//                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
//                        ]
//                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                },
                //第二项数据
                {
                    name:'改进计划',
                    type:'bar',
                    data:[{!! $data['plans'] !!}],
//                    markPoint : {
//                        data : [
//                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
//                        ]
//                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }

            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
@endsection